<template>
  <div class="loginContainer">
    <div class="login-l-side">
      <h1 class="login-title">就爱商城管理系统</h1>
    </div>
    <el-card style="width: 500px; height: 410px;">
      <div class="login-r-side">
        <el-form
          :model="formData"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <h2 class="login-subtitle">平台管理系统登录</h2>
          <el-form-item
            label="用户名"
            prop="username"
            style="margin-top: 20px;"
          >
            <el-input
              type="text"
              v-model="formData.username"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="formData.password"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="margin-left:110px; margin-top: 10px;"
            >
              登录
            </el-button>
            
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { login} from "../api/users";
import { setToken } from "../utils/auth";

export default {
data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    }
  },
 methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.formData)
            .then((data) => {
              let res = data;
              console.log(res);
              if (res.code === 1000) {
                setToken(res.data.token,res.data.refreshToken)
                // localStorage.setItem("accessToken", res.data.token);
                // localStorage.setItem("refreshToken", res.data.refreshToken);
                this.$router.push('/')
              } else {
                this.$message({type:'error',message:res.msg});
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
    
 this.$router.push("/register");

        
    },
  },
}
</script>

<style>
.login-l-side {
  float: left;
  width: 264px;
  height: 410px;
  text-align: center;
  color: #fff;
  background-image: url(../components/img/img2.jpg);
  transform: scale(1.5);
  margin-right: 100px;
}
.login-r-side {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.loginContainer .el-card {
  transform: scale(1.5);
  margin-left: 90px;
}

.login-title {
  line-height: 80px;
  margin-top: 10%;
  padding: 0 25px;
  font-size: 26px;
  font-weight: 400;
}
.loginContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;
  height: 100vh;
  background: url(../components/img/bg.jpg);
}

.login-subtitle {
  padding-top: 36px;
  padding-bottom: 30px;
  color: #0a7ec3;
  font-size: 24px;
  text-align: center;
  font-weight: 500;
}
</style>